<template>
  <div class="homebg">
    <div class="pui-pages-invite-style-container">
      <div class="pui-pages-invite-style-main">
        <div class="ui-spin-container">
          <div class="pui-pages-invite-style-content">
            <div style="margin-bottom: 20px; height: 100px" class="svglogo">
              <svg-icon
                :icon-class="'hflogo'"
                style="margin-right: 16px; font-size: 80px"
                class="scgicon"
              />
              <span>合肥学院</span>
            </div>
            <div class="pui-pages-invite-style-title">
              {{ joininfo.teacher }} 在 合肥学院 邀请你加入课程
              {{ joininfo.className }}
            </div>
            <el-button
              type="primary"
              v-if="determine()"
              @click="jointeam"
              class="ui-btn ui-btn-primary pui-pages-invite-style-primaryBtn"
              ><span>加入课程</span>
            </el-button>
            <el-button
              type="primary"
              v-else
              @click="login"
              class="ui-btn ui-btn-primary pui-pages-invite-style-primaryBtn"
              ><span>登 录 / 注 册</span>
            </el-button>
            <div class="pui-pages-invite-style-greyText">
              <a class="pui-pages-invite-style-link">DaHe科技</a
              >&nbsp;-&nbsp;节省研发团队的每一分钟
            </div>
            <div class="pui-pages-invite-style-greyText">HFUU.com</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Invite",
  inheritAttrs: false,
});

import { JoinLinkStudent, AddStudent } from "@/api/student";
import { useUserStore } from "@/store/modules/user";
import { onMounted } from "vue";
import router from "@/router";
import SvgIcon from "@/components/SvgIcon/index.vue";

// 全局 邀请组件
const userStore = useUserStore();
// 定义类型
interface jointype {
  teacher: string;
  className: string;
}
const joininfo = ref<jointype>({
  teacher: "",
  className: "",
});
const link = router.currentRoute.value.query.key as string; // 直接断言

// 判断登录注册（如果未登录先让他去登录)
function determine() {
  // token
  if (userStore.token != "") {
    return true;
  } else {
    return false;
  }
}

// 点击加入团队
function jointeam() {
  AddStudent(link).then(() => {
    ElMessage.success("成功加入课程!");
    router.push("/course/study"); // 成功跳转首页
  });
}

// 解析链接信息
function getinfo() {
  if (link != null) {
    JoinLinkStudent(link)
      .then(({ data }) => {
        joininfo.value.teacher = data[0];
        joininfo.value.className = data[1];
      })
      .finally(() => {});
  }
}
// 跳转登录注册
function login() {
  router.push("/login");
}

onMounted(() => {
  determine();
  getinfo();
});
</script>

<style scoped lang="scss">
.svglogo {
  .scgicon {
    display: inline-block;
    vertical-align: middle;
  }

  span {
    font-size: 28px;
    font-weight: bolder;
    display: inline-block;
    vertical-align: middle;
  }
}

.pui-pages-invite-style-container {
  display: flex;
  width: 100%;
  height: 100vh;
  text-align: center;
}

.pui-pages-invite-style-main {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(0deg, #dde5f7, #e8edf9, #f3f6fb, #ffffff);
}

.pui-pages-invite-style-content {
  padding: 15px;
}

.pui-pages-invite-style-poster {
  display: block;
  width: 470px;
  margin: 0 auto;
}

.pui-pages-invite-style-logo {
  position: absolute;
  top: 32px;
  left: 48px;
  width: 117px;
}

.pui-pages-invite-style-primaryBtn {
  width: 240px;
  height: 40px;
  margin: 0 0 32px;
  color: #fff !important;
}

.pui-pages-invite-style-primaryBtn[disabled] {
  color: hsla(0, 0%, 100%, 0.32) !important;
}

.pui-pages-invite-style-footerText {
  margin: 8px 0;
  color: rgba(24, 24, 25, 0.42);
  text-align: center;
}

.pui-pages-invite-style-link {
  color: #409eff;
}

.pui-pages-invite-style-link:hover {
  color: #409eff;
}

.pui-pages-invite-style-title {
  margin-bottom: 48px;
  color: #000;
  font-weight: 500;
  font-size: 24px;
}

.pui-pages-invite-style-titleInvalid {
  color: #dd425a;
}

.pui-pages-invite-style-tips {
  margin-top: 8px;
  color: rgba(24, 24, 25, 0.7);
}

.pui-pages-invite-style-greyText {
  margin: 8px 0;
  color: rgba(24, 24, 25, 0.42);
  line-height: 20px;
  text-align: center;
}

.pui-pages-invite-style-footerLinks {
  position: fixed;
  bottom: 48px;
  color: hsla(0, 0%, 49.4%, 0.9);
}

.pui-pages-invite-style-footerLinks a {
  color: hsla(0, 0%, 49.4%, 0.9);
}

.pui-pages-invite-style-footerLinks a:hover {
  color: #9373ee;
}
</style>
